<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>实时状态页面</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link href="../css/style.css" rel="stylesheet" />
		<style type="text/css">
			$ {
				demo.css
			}
			
			.animation {
				text-align: center;
			}
			.chart div {
				float: left;
			}
			
			.char-tittle {
				background-color: #55BFDC;
				padding: 3px;
				position: absolute;
				top: 165px;
				left: -2.1em;
			}
				
			.table-content {
				padding: 10px 2px;
				background-color: #fff;
			}
			
			.table-content-left {
				margin-top: 1px;
				width: 45%;
				padding: 10px 2px;
				float: left;
				background-color: #fff;
			}
			
			.table-content-right {
				margin-top: 1px;
				width: 55%;
				padding: 10px 2px;
				float: left;
				background-color: #fff;
			}
			
			.inner-table {
				width: 100%;
			}
			
			.inner-table td {
				text-align: center;
				width: 20%;
				height: 30px;
			}
			
			.inner-table th {
				font-size: .8em;
				text-align: center;
			}
			
			.inner-table .action {
				font-size: .7em;
				font-weight: bold;
				text-align: right;
			}
			
			.inner-table .jigou {
				width: 30%;
				font-size: .7em;
				font-weight: bold;
				text-align: center;
			}
			
			.inner-table .state {
				width: 40%;
				font-size: .7em;
				text-align: left;
				padding-left: 1em;
				color: #666666;
			}
			
			.data{
				width: 20%;
				color: #666;
				font-size: .7em;
			}
			
			.light {
				width: 30px;
				height: 15px;
				background-color: #F39800;
				border-radius: 5px;
				margin: 0 auto;
			}
			
			.gray {
				width: 30px;
				height: 15px;
				background-color: #EFEFF4;
				border-radius: 5px;
				margin: 0 auto;
			}
			
			.red {
				background-color: #F10020 !important;
			}
			
			.green {
				background-color: #66F50E !important;
			}
		</style>
		
	</head>

	<body>
		<div class="animation">
			<h5>实时状态</h5>
		</div>
		<div id="mask"><span>正在获取实时数据...</span></div>
		<div class="chart">
			<div class="inner-box">
				<div id="angular-gauge1" style="height: 220px; width: 50%; margin: 0 auto"></div>				
			</div>			
			<div class="inner-box">
				<div id="angular-gauge2" style="height: 220px; width: 50%; margin: 0 auto"></div>
				<span class="describe"></span>
			</div>
		</div>
		<div class="table-content">
			<table class="inner-table" border="0">
				<tr style="background-color: #F9F39F;">
					<th style="text-align: left;padding-left: 1em;">参数</th>
					<th>值</th>
					<th>单位</th>
				</tr>
				<tr>
					<td class="state">系统压力</td>
					<td class="data" id="Systempress">
						--
					</td>
					<td class="data">B<small>AR</hsmall></td>
				</tr>
				<tr>
					<td class="state">排气压力</td>
					<td class="data" id="Exhaustpress">
						--
					</td>
					<td class="data">B<small>AR</hsmall></td>
				</tr>
				<tr>
					<td class="state">喷油压力</td>
					<td class="data" id="Oilpress">
						--
					</td>
					<td class="data">B<small>AR</hsmall></td>
				</tr>
				<tr>
					<td class="state">一级排气压力</td>
					<td class="data" id="FirstExhaustPress">
						--
					</td>
					<td class="data">B<small>AR</hsmall></td>
				</tr>
				<tr>
					<td class="state">进气压力</td>
					<td class="data" id="Inletpress">
						--
					</td>
					<td class="data"><small>k</hsmall>P<small>A</hsmall></td>
				</tr>
				<tr>
					<td class="state">A相电流</td>
					<td class="data" id="Acurrent">
						--
					</td>
					<td class="data">A</td>
				</tr>
				<tr>
					<td class="state">B相电流</td>
					<td class="data" id="Bcurrent">
						--
					</td>
					<td class="data">A</td>
				</tr>
				<tr>
					<td class="state">C相电流</td>
					<td class="data" id="Ccurrent">
						--
					</td>
					<td class="data">A</td>
				</tr>
				<tr>
					<td class="state">主机频率</td>
					<td class="data" id="HostFreq">
						--
					</td>
					<td class="data">H<small>Z</hsmall></td>
				</tr>
				<tr>
					<td class="state">风机频率</td>
					<td class="data" id="FansFreq">
						--
					</td>
					<td class="data">H<small>Z</hsmall></td>
				</tr>
				<tr>
					<td class="state">累积运行时间</td>
					<td class="data" id="Runtime1">
						--
					</td>
					<td class="data">H<small>Z</hsmall></td>
				</tr>
				<tr>
					<td class="state">加载累计时间</td>
					<td class="data" id="Loadruntime1">
						--
					</td>
					<td class="data">小时</td>
				</tr>
				<tr>
					<td class="state">绕组温度1</td>
					<td class="data" id="WindingTemp1">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">绕组温度2</td>
					<td class="data" id="WindingTemp2">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">进水温度</td>
					<td class="data" id="InWaterTempT">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">出水温度</td>
					<td class="data" id="OutWaterTemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">一级排气温度</td>
					<td class="data" id="FirstExhaustTemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">系统温度</td>
					<td class="data" id="Systemtemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">排气温度</td>
					<td class="data" id="Exhausttemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">前轴承温度</td>
					<td class="data" id="Fbearingtemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">后轴承温度</td>
					<td class="data" id="Bbearingtemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">喷油温度</td>
					<td class="data" id="OilTemp">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">环境温度</td>
					<td class="data" id="EnvTemperature">
						--
					</td>
					<td class="data">℃</td>
				</tr>
				<tr>
					<td class="state">环境湿度</td>
					<td class="data" id="EnvHumidity">
						--
					</td>
					<td class="data"></td>
				</tr>
				
			</table>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/highcharts/js/highcharts.js"></script>
		<script src="../js/highcharts/js/highcharts-more.js"></script>
		<script src="../js/gizwits_noti_ws_0.1.1.js"></script>
		<script>
			mui.plusReady(function(){
			    var self = plus.webview.currentWebview();
			    var devid = self.devid;				
				plus.nativeUI.showWaiting( "实时数据加载中..." );
				var tic ;
				mmtt();
				function mmtt (){
				  	tic = setTimeout(function(){
					  	plus.nativeUI.closeWaiting();
					  	alert("数据连接超时，请确认设备连接情况！")
					},10000);
				  } 
	    	    var chart1,chart2;
			    var plotBands = [
			        {from: 0, to: 5, color: '#55BF3B' }, 
			        { from: 5,to: 10,color: '#DDDF0D'}, 
			        {from: 10,to: 16,color: '#DF5353'}];
			    init('angular-gauge1','排气压力',-150,150,0,16,'压力',0.0,'Bar',plotBands,function(chart){
			       chart1 = chart;     
			    });
			
			    plotBands = [
			        {from: 0, to: 120, color: '#55BF3B' }, 
			        { from: 120,to:160 ,color: '#DDDF0D'}, 
			        {from: 160,to: 200,color: '#DF5353'}];
			    init('angular-gauge2','排气温度',-150,150,0,200,'温度',0.0,'℃',plotBands,function(chart){
			        chart2 = chart;
			    });				    
			    var t = devid.split("/"); 
                  	t[1].toLocaleLowerCase();
		        var gizwitsNotiWs;
		        var enterpriseId = '96d09b9d8d8c4086bca6b0682c60e353';
		        var enterpriseSecret = '6e4fa5d6081e4ce4b0fa3d5caf5f5c73';
		        var host = 'noti.gizwits.com';
		        var port = '2016';        
		        gizwitsNotiWs = new GizwitsNotiWS(enterpriseId, enterpriseSecret, host, port);		        
		        gizwitsNotiWs.onConnected = onConnected;
		        gizwitsNotiWs.onSubscribed = onSubscribed;
		        gizwitsNotiWs.onEvent = onEvent;
		        gizwitsNotiWs.onError = onError;      
		       
		        gizwitsNotiWs.connect();    
		
		        function onConnected()
		        {
		            console.log("完成onConnected!可以开始订阅事件。");
		            subscribe();
		            
		        }
		        
		        function subscribe()
		        {
		            var pk = t[0];
		
		            var mac = [t[1]] ;           
		                       
		            var eventType = ['device.status.kv'];            
		
		            var data = [{
		                        "product_key": pk, 
		                        "macs": mac,
		                        "events": eventType
		                        }];            
		             //console.log(data.length());   
		            if(data.length > 0){
		                console.log("开始订阅事件!");
		                //console.log(data);
		                gizwitsNotiWs.subscribe(data);             
		            }
		        }
		      
		        function onSubscribed()
		        {
		            console.log("完成onSubscribed!可以开始接受消息。");
		        }        
		       
		
		        function onError(value)
		        {
		            console.log(value.toString());
		        }
		        
		       function onEvent(msg){
		        	//console.log(msg);
		        if(!msg){
		        	plus.nativeUI.showWaiting( "实时数据加载中..." );
		        }else{ 
		        	plus.nativeUI.closeWaiting();
		        	clearTimeout(tic);
		        	var msg = msg.data;
		        	//console.log(JSON.stringify(msg));
				    var a = msg.Exhaustpress.toFixed(1);
				    	updatechart(chart1,parseFloat(a));
				    
				    var b = msg.Exhausttemp.toFixed(1);
				        updatechart(chart2,parseFloat(b));
				    for(var key in msg){ 
				       $("#"+key).text(msg[key].toFixed(1));                
				        if(key=="Loadruntime"){
				            $("#Loadruntime1").text(msg[key])
				        }          
				        if(key=="Runtime"){
				            $("#Runtime1").text(msg[key])
				        }    
				        if(key=="Srun" && msg[key]=="0"){
				            $("#Srun").text('停止');
				            $("#Srun1").removeClass("blue");
				            $("#Srun1").addClass("red");
				
				        }
			            if(key=="EnvHumidity"){
			                $("#EnvHumidity").text(msg[key]+"%")
			            }
				        if(key=="Srun" && msg[key]=="1"){
				            $("#Srun").text('运行');
				            $("#Srun1").removeClass("red");
				            $("#Srun1").addClass("blue");                      
				        }
				        a = msg.Srun;
				        if(key=="Sload" && msg[key]=="0"){              
				            $("#Sload").text('卸载');
				            $("#Sload1").removeClass("blue");
				            $("#Sload1").addClass("red");
				
				       }
				       if(key=="Sload" && msg[key]=="1"){              
				            $("#Sload").text('加载');
				            $("#Sload1").removeClass("red");
				            $("#Sload1").addClass("blue");
				
				       }
				       
				         if(key == "Flongstop" && msg[key]=="1"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("gray");
				            $("#"+key).addClass("red");
				         }
				         if(key == "Flongstop" && msg[key]=="0"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("red");
				            $("#"+key).addClass("gray");
				         }
				        if(key == "Ffault" && msg[key]=="1"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("gray");
				            $("#"+key).addClass("red");
				         }
				         if(key == "Ffault" && msg[key]=="0"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("red");
				            $("#"+key).addClass("gray");
				         }
				           if(key == "Fwarn" && msg[key]=="1"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("gray");
				            $("#"+key).addClass("red");
				         }
				         if(key == "Fwarn" && msg[key]=="0"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("red");
				            $("#"+key).addClass("gray");
				         }
				         if(msg[key]=="0" && $("#"+key).attr("ftag")=="fault"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("red-box");
				            $("#"+key).addClass("gray-box");
				         }
				         if(msg[key]=="1" && $("#"+key).attr("ftag")=="fault"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("gray-box");
				            $("#"+key).addClass("red-box");
				         }
				         if(msg[key]=="0" && $("#"+key).attr("stag")=="spara"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("orange-box");
				            $("#"+key).addClass("gray-box");
				         }
				         if(msg[key]=="1" && $("#"+key).attr("stag")=="spara"){
				            $("#"+key).text("");
				            $("#"+key).removeClass("gray-box");
				            $("#"+key).addClass("orange-box");
				         }       
				    }
				  }
		        }
			    
			    
				function updatechart(chart,data){    
				    if (!chart.renderer.forExport) { 
				        var point = chart.series[0].points[0];
				        point.update(data);    
				    }
				}
			
				function init(id,text,startAg,endAg,min,max,name,initVal,subfix,pb,cb){
				    $('#' + id).highcharts({				
				        chart: {
				            type: 'gauge',
				            plotBackgroundColor: null,
				            plotBackgroundImage: null,
				            plotBorderWidth: 0,
				            plotShadow: false
				        },
				        title:{
				            text: text				
				        },
				        pane: {
				            startAngle: startAg,
				            endAngle: endAg,
				            background: [{
				                backgroundColor: {
				                    linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
				                    stops: [
				                        [0, '#FFF'],
				                        [1, '#333']
				                    ]
				                },
				                borderWidth: 0,
				                outerRadius: '109%'
				            }, {
				                backgroundColor: {
				                    linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
				                    stops: [
				                        [0, '#333'],
				                        [1, '#FFF']
				                    ]
				                },
				                borderWidth: 1,
				                outerRadius: '107%'
				            }, {
				              
				            }, {
				                backgroundColor: '#DDD',
				                borderWidth: 0,
				                outerRadius: '105%',
				                innerRadius: '103%'
				            }]
				        },
				        
				        yAxis: {
				            min: min,
				            max: max, 
				            minorTickInterval: 'auto',
				            minorTickWidth: 1,
				            minorTickLength: 10,
				            minorTickPosition: 'inside',
				            minorTickColor: '#666',
				            tickPixelInterval: 30,
				            tickWidth: 2,
				            tickPosition: 'inside',
				            tickLength: 10,
				            tickColor: '#666',
				            labels: {
				                step: 2,
				                rotation: 'auto'
				            },
				            title: {
				                text: subfix
				            },
				            plotBands: pb
				        },
				
				        series: [{
				            name: name,
				            data: [initVal],
				            tooltip: {
				                valueSuffix: ' '+ subfix +' '
				            }
				        }]
				
				    },    
				    function (chart) {
				        cb(chart);
				    });
				}
		    })
		</script>
		
	</body>

</html>